<template>
  <div class="table2 flex-col h-full overflow-hidden m-m">
    <div class="pb-14">
      <MsSectioner ref="MsSectionerRef" :values="menuList" :height="30" @click="tabChange" />
    </div>
    <div class="flex-1 w-full color-bg-1">
      <section class="box-full overflow-hidden box-border">
        <transition name="fade-slide" mode="out-in" appear>
          <keep-alive>
            <component :is="menuList[selectedKey].value" @changeTab="changeTab"></component>
          </keep-alive>
        </transition>
      </section>
    </div>
  </div>
</template>
<script setup>
import Individual from './individual/index.vue'
import Company from './company/index.vue'

defineOptions({ name: 'gigPaymentStaff' })

const selectedKey = ref(0)
const MsSectionerRef = ref()
const menuList = ref([
  { name: '个人', value: markRaw(Individual) },
  { name: '公司', value: markRaw(Company) }
])

const tabChange = (val) => {
  selectedKey.value = val.index
}

const changeTab = (val) => {
  MsSectionerRef.value?.handleClick(val.tab)
}
</script>
<style lang="scss" scoped>
.color-bg-1 {
  background: var(--color-bg-1);
}
.center-tab {
  border-left: 1px solid rgb(var(--primary-6));
  border-right: 1px solid rgb(var(--primary-6));
}
</style>
